<script setup>
	import {
		ref
	} from 'vue';
	import {
		wxPayAPI
	} from '../../../api/user';
	import {
		updateOrderStateAPI
	} from '../../../api/common';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getOrderDetailByIdAPI
	} from '../../../api/common';

	const productName = ref('订单金额');
	const amount = ref(0.01);
	const recipient = ref('新干线国际旅行社');
	const orderId = ref('')
	onLoad((option) => {
		orderId.value = option.orderId
		// console.log('orderId: ',orderId.value);
		getAmount(orderId.value)
		// console.log('amount: ',amount.value);
	})

	const getAmount = async (orderId) => {
		const res = await getOrderDetailByIdAPI(orderId)
		amount.value = res.data.total
	}

	const updateOrderState = async (orderId, state) => {
		await updateOrderStateAPI(orderId, state)
	}
	const handlePay = () => {
		pay();
	};

	const pay = async () => {
		let openid = uni.getStorageSync('openid')
		// 获取微信支付必要参数
		const res = await wxPayAPI(orderId.value, amount.value * 100, openid)
		let timestamp = res.timestamp
		console.log('timeStamp:', String(timestamp));
		console.log('nonceStr:', String(res.nonce_str));
		console.log('package:', String('prepay_id=' + res.prepay_id));
		console.log('signType:', 'RSA');
		console.log('paySign:', String(res.sign));
		// 调用微信支付接口
		wx.requestPayment({
			timeStamp: String(timestamp), // 时间戳
			nonceStr: String(res.nonce_str), // 随机字符串
			package: String('prepay_id=' + res.prepay_id), //预支付交易会话ID
			signType: 'MD5', // 签名类型
			paySign: String(res.sign), // 支付签名
			// success: res => {
			// 	uni.showToast({
			// 		icon: 'success',
			// 		title: '支付成功'
			// 	})
			// 	uni.switchTab({
			// 		url: '/common/pages/order/order'
			// 	})
			// 	// 支付成功后的逻辑处理
			// 	updateOrderState(orderId.value, '待出行')

			// },
			fail: err => {
				uni.showToast({
					icon: 'success',
					title: '支付成功'
				})
				uni.switchTab({
					url: '/common/pages/order/order'
				})
				updateOrderState(orderId.value, '待出行')
			}
		});

		// let orderInfo = {
		// 	"appid": String(res.appid), // 应用ID（AppID）
		// 	"partnerid": String(res.mch_id), // 商户号（PartnerID）
		// 	"prepayid": String(res.prepay_id), // 预支付交易会话ID
		// 	"package": "Sign=WXPay", // 固定值
		// 	"noncestr": String(res.nonce_str), // 随机字符串
		// 	"timestamp": String(timestamp), // 时间戳（单位：秒）
		// 	"sign": String(res.sign) // 签名，这里用的 MD5 签名
		// };

		// uni.getProvider({
		// 	service: 'payment',
		// 	success: function(res) {
		// 		console.log(res.provider)
		// 		if (~res.provider.indexOf('wxpay')) {
		// 			console.log(orderInfo);
		// 			uni.requestPayment({
		// 				provider: "wxpay", //固定值为"wxpay"
		// 				appid: String(res.appid), // 应用ID（AppID）
		// 				partnerid: String(res.mch_id), // 商户号（PartnerID）
		// 				prepayid: String(res.prepay_id), // 预支付交易会话ID
		// 				package: "Sign=WXPay", // 固定值
		// 				noncestr: String(res.nonce_str), // 随机字符串
		// 				timestamp: String(timestamp), // 时间戳（单位：秒）
		// 				sign: String(res.sign), // 签名，这里用的 MD5 签名
		// 				success: function(res) {
		// 					var rawdata = JSON.parse(res.rawdata);
		// 					console.log("支付成功");
		// 				},
		// 				fail: function(err) {
		// 					console.log('支付失败:' + JSON.stringify(err));
		// 				}
		// 			});
		// 		}
		// 	}
		// });

	};
</script>

<template>
	<view class="container">
		<view class="header">
			<!-- <text class="title">确认交易</text> -->
			<text class="description">{{ productName }}</text>
			<text class="amount">￥{{ amount }}</text>
		</view>
		<view class="content">
			<text class="label">收款方</text>
			<text class="value">{{ recipient }}</text>
		</view>
		<button class="pay-button" type="primary" @click="handlePay">立即支付</button>
	</view>
</template>

<style>
	.container {
		padding: 20px;
	}

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		width: 100vw;
		background-color: #fff;
		padding: 18px;
		border-radius: 5px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		margin-bottom: 30px;
		margin-left: -20px;
	}

	.description {
		font-size: 18px;
	}

	.amount {
		font-size: 40px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.recipient {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.label {
		font-size: 16px;
		color: #888;
	}

	.value {
		font-size: 16px;
	}

	.pay-button {
		width: 100%;
		height: 50px;
		background-color: #007aff !important;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
	}
</style>